<template>
	<view class="container">
		<view class="list">
			<view class="list-item">
				<text>支付宝账号</text>
				<input type="text" v-model="ali_account" placeholder="请输入" :disabled="true"/>
			</view>
			<view class="list-item">
				<text>验证码</text>
				<input type="text" v-model="code" placeholder="请输入" />
				<view class="sendCode" @click="showBtn=false;cutTime(60)">{{ showBtn?'获取验证码':num+'S' }}</view>
			</view>
			<view class="list-item">
				<text>姓名</text>
				<input type="text" value="" v-model="ali_name" placeholder="请输入" />
			</view>
		</view>
		
		<view class="btn">
			<button type="default" @click="submit">绑定账号</button>
		</view>
	
	
	</view>
</template>

<script>
import {
	bankDetail,
	bank, bandBank, sendCode
} from '../../../api/api.js'
export default {
	data() {
		return {
			ali_name: '',
			ali_account: '',
			code:'',
			showBtn:true,
			num:60,
			timer:null
		}
	},
	onLoad() {
		
		this.ali_account = uni.getStorageSync('user').mobile;
		this.getBankInfo()
	},
	methods: {
		cutTime(num){
			if(this.ali_account){
				this.timer = setInterval(()=>{
					num--;
					if(num>0){
						this.showBtn = false
						this.num = num;
					}else{
						this.showBtn = true;
						clearInterval(this.timer)
					}
					
				},1000)
				sendCode({
					mobile:this.ali_account,
					event:'notice'
				}).then(res => {
					console.log(res)
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				})
			}else{
				uni.showToast({
					icon: 'none',
					title: '请输入支付宝账号'
				})
				return
			}
			
		},
		getBankInfo() {
			bankDetail().then(res => {
				console.log(res)
				if (res.data) {
					this.card = true
					this.ali_name = res.data.ali_name
					// this.ali_account = res.data.ali_account
				} else {
					this.card = false
				}
			})
		},
		submit() {
			if (!this.ali_name) {
				uni.showToast({
					icon: 'none',
					title: '请输入姓名'
				})
				return
			}
			if (!this.ali_account) {
				uni.showToast({
					icon: 'none',
					title: '请输入支付宝账号'
				})
				return
			}
			// 绑定银行卡
			bandBank({
				token:uni.getStorageSync('token'),
				ali_name: this.ali_name,
				ali_account:this.ali_account,
				code:this.code
			}).then(res=>{
				if(res.code == 1){
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/agent/user'
						})
					},600)
					
				}
			})
			
		}
	}
}
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 100%;
	background-color: #f6f6f6;
}

.tip {
	width: calc(100% - 60upx);
	height: 80upx;
	line-height: 80upx;
	padding: 0 30upx;
	font-size: 28upx;
	color: #666666;
}

.list {
	width: calc(100%);
	padding: 0 30upx;
	background-color: #FFFFFF;
	
	.list-item {
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		padding: 10upx 0;
		display: flex;
		justify-content: space-between;
		border-bottom: 1upx solid #ECECEC;
		
		input {
			height: 100%;
			min-width: 200upx;
			text-align: right;
		}
	}
}

.btn {
	width: calc(100% - 60upx);
	margin: 40upx auto;
	height: 90upx;
	
	button {
		width: 100%;
		height: 100%;
		height: 90upx;
		border-radius: 45upx;
		background-color: #3eb9fe;
		color: #FFFFFF;
	}
}
.sendCode{
	width: 180rpx;
	background: #3eb9fe;
	color: #fff;
	border-radius: 26rpx;
	padding: 4rpx 16rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
